const lazy = {
    install(Vue, options) {
        const defaultSrc = options.default;
        const scrollDom = options.scrollDom;
        Vue.directive('lazy', {
            bind(el, option) {                                    //指令第一次,加载时调用,只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
                lazy.init(el, option.value, defaultSrc);          //初始化
            },
            inserted(el, option) {                                //被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
                if (IntersectionObserver) {                       //做兼容,可以用就用,不可以用就不用
                    lazy.observer(el)
                } else {
                    lazy.scroll(el, scrollDom)
                }
            }
        })
    },
    init(el, src, defaultSrc) {
        el.setAttribute('data-src', src)         //设置一个属性,放真实地址
        el.setAttribute('src', defaultSrc)       //默认就给一个默认图片
    },
    observer(el) {
        // 使用浏览器提供的observer IntersectionObserver API 可以观察元素的相对位置，并在相对位置发生变化时触发回调函数。,显示时可以触发回调函数
        let observerKJ = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    let src = el.getAttribute('data-src')
                    el.setAttribute('src', src)
                    el.removeAttribute('data-src')
                    el.parentNode.classList.add('animate__bounceInDown')
                    observerKJ.unobserve(el)                //显示后,删除该方法,不在执行
                }
            })
        })
        observerKJ.observe(el)
    },
    scroll(el, scrollDom) {
        let src = el.getAttribute('data-src')
        if (!src) return false
        let timer = null
        let target = document.querySelector(scrollDom)
        target.addEventListener('scroll', () => {
            clearTimeout(timer)
            timer = setTimeout(() => {
                let rect = el.getBoundingClientRect()
                if (rect.top < target.scrollTop) {
                    el.setAttribute('src', src)
                    el.removeAttribute('data-src')      //设置完毕删除该属性
                }
            }, 100)
        })
    }
}
export default lazy;